<template>
	<view class="custom-nav">
		<view class="custom-tit font14">
			<view>
				<text class="title font16 bold"> {{majorList.schoolName || ''}}</text> <text class="font12">({{majorList.majorName || ''}})</text> 
				<text class="font14 bold" style="margin:0 20rpx;">学硕/{{majorList.studyType==1?'全日制':'非全日制'}} </text>
				<!-- <text v-if="majorList.majorRank" class="" selectable="false" space="false" decode="false"> {{majorList.majorRank}}</text> -->
				<text v-if="majorList.majorStar" class="font20 bold star">5★+</text>
			</view>
			<view class="mdFlex flex">
				<view class="">
					<text class="sort-num font12" style="margin-right:20rpx;" v-if="majorList.subjectRank">排名第<text class="font14 bold">{{majorList.subjectRank}}</text> </text>
					<text class="font12" v-if="majorList.establishNum">全国共 <text class="font14 bold">{{majorList.establishNum}}</text> 所大学开设了该专业</text>
				</view>
				
				<view class="setb">
					<button @click="handleClick" :class="['oringe_btn font12',isCancel?'cancel_reg':'do_reg']">{{isCancel?'取消':''}}预报</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTraffic,
		addTraffic,
		deleteTraffic,
	} from '@/api/toolbox.js'
	export default {
		props: [
			'majorList','querySign'
		],
		data() {
			return {
				isCancel: false, //控制【预报】按钮的样式
				iter: new Date().getFullYear(),
			}
		},
		created() {
			if(this.querySign){
				// 查询预报状态
				let dataP = {
					'year':this.iter,
					'myMajor': this.querySign.majorCode,
					'myCollege': this.querySign.collegeCode
				}
				getTraffic(dataP).then((res)=>{
					if (res.code == 100000) {
						if (res.data == true) {
							this.isCancel = true
						} else {
							this.isCancel = false
						}
					}
				})
			}
			
		},
		methods:{			
			// 预报名
			handleClick() {
				let that = this;
				if (!that.isCancel) {
					var sign_up_data = {
						'year': that.iter,
						'mySchool': that.majorList.schoolCode,
						'myMajor': that.majorList.majorCode,
						'myCollege': that.majorList.collegeCode
					}
					addTraffic(sign_up_data).then(res => {
						if (res.code == 100000) {
							that.isCancel = !that.isCancel
							uni.showToast({
								title: '报名成功！',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: res.msg||'报名失败',
								icon: 'none'
							})
						}
					})
				} else {
					deleteTraffic({
						'year': that.iter,
						'majorCode': that.majorList.majorCode,
						'collegeCode': that.majorList.collegeCode
					}).then(res => {
						if (res.code == 100000) {
							uni.showToast({
								title: '取消成功！'
							})
							that.isCancel = !that.isCancel
						} else {
							uni.showToast({
								title: res.msg||'取消报名失败',
								icon: 'none'
							})
						}
					})
				}
			}
	
		}
		
	}
</script>

<style lang="scss">
	
	.custom-nav {
		// position: sticky;
		// top: 88rpx;
		// background: rgba(247, 221, 94, 1);
		background: rgba(247, 221, 94, 0.27);
		// background: linear-gradient(to right, rgba(12,205,163,0.3), rgba(247, 221, 94, 0.17));
		// background: linear-gradient(to right, #0CCDA3, #C1FCD3);
		// width: 100vw;
		padding: 50rpx 0 24rpx;
		z-index: 8;
		border-radius: 50rpx;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		.custom-tit {
			color: #333;
			padding: 0 34rpx 0;
			.star {
				display: inline-block;
				vertical-align: middle;
				margin: -6rpx 0 0 10rpx;
			}
			
			.title{
				margin-right: 20rpx;
			}
			view {
				padding: 5rpx 0;
				align-items: center;
			}
		}
		
		.mdFlex {
			align-items: center;
			justify-content: space-between;
			.sort-num{
				// margin-left: 30rpx;
			}
			
			.setb {
				// margin-right: 34rpx;
				.oringe_btn {
					margin: 0;
					min-width: 140rpx;
					height: 60rpx;
					border-radius: 50px;
					line-height: 60rpx;
				}
				.do_reg {
					background-color: rgba(247, 221, 94, 0.8);
					border: none;
					box-shadow: 0rpx 0rpx 10rpx rgba(0,0,0,0.1);
					color: #333;
				}
				
				.cancel_reg {
					background-color: rgba(247, 221, 94, 0.2);
					border: 1px solid rgba(247, 221, 94, 1);
					box-shadow: none;
					color: #F7DD5E;
				}
			}
		}
		
		::v-deep button:after{
			border: none
		}
	}
</style>